<template>
  <div style="height: 100%">
    <el-form class="query-form" :inline="true" :model="formQuery">
      <el-col :span="4">
        <el-form-item>
          <el-select clearable placeholder="模板状态" v-model="formQuery.costFactorStatus">
            <el-option value="0" label="正常"></el-option>
            <el-option value="1" label="终止"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <!--
      <el-col :span="4">
        <el-form-item>
          <el-select placeholder="适用范围"></el-select>
        </el-form-item>
      </el-col>
      -->
      <el-col :span="4">
        <el-form-item>
          <el-input clearable placeholder="模板名称" v-model="formQuery.inputString"></el-input>
        </el-form-item>
      </el-col>
      <el-form-item>
        <el-button @click="query">查询</el-button>
      </el-form-item>
      <el-form-item style="position:absolute;right:0.2rem;">
        <el-button v-if="!RoomSelect" type="primary" @click="$router.push('./edit/2')">新增模板</el-button>
        <template v-else>
          <el-button type="primary" :loading="canSubmit" @click="replaceTemplate">确认更换模板</el-button>
          <el-button type="info" @click="cancelTemplate">取消</el-button>
        </template>
      </el-form-item>
    </el-form>
    <div class="div-table" style="padding:0 20px;">
        <el-scrollbar style="height:100%;">
            <el-table ref="multipleTable" class="roomTable" :data="tableData" :row-class-name="tableRowClassName"
                style="width: 100%">
                <el-table-column :selectable="selMethod" type="selection">
                </el-table-column>
                <el-table-column type="index" label="序号" width="70"></el-table-column>
                <el-table-column prop="coefficientName" label="系数模板名称" width="600"></el-table-column>
                <el-table-column prop="costFactorStatus" label="系数模板状态">
                <template slot-scope="{row}">
                    {{ row.costFactorStatus | costFactorStatusFilter }}
                </template>
                </el-table-column>
                <el-table-column v-if="RoomSelect" label="操作" align="center" header-align="center">
                <template slot-scope="{row}">
                    <router-link class="el-link el-link--primary" :to="'/coefficient/edit/0/'+row.pkCoefficientTemplateId">
                    | 模板详情
                    </router-link>
                </template>
                </el-table-column>
                <el-table-column v-if="!RoomSelect" label="操作" align="center" header-align="center">
                <template slot-scope="{row}">
                    <router-link class="el-link el-link--primary" :to="'/coefficient/edit/0/'+row.pkCoefficientTemplateId">
                    | 模板详情
                    </router-link>
                    <template v-if="row.costFactorStatus == '0'">
                    <el-link type="primary" :underline="false" v-if="row.costFactorStatus!='1'"
                        @click="stopCoefficient(row.pkCoefficientTemplateId)">
                        | 停止使用
                    </el-link>
                    <router-link class="el-link el-link--primary" :to="'/coefficient/edit/1/'+row.pkCoefficientTemplateId">
                        | 修改系数
                    </router-link>
                    <router-link class="el-link el-link--primary"
                        :to="'/coefficient/relation/'+row.pkCoefficientTemplateId+'?name='+row.coefficientName">
                        | 关联房间
                    </router-link>
                    </template>
                </template>
                </el-table-column>
            </el-table>
        </el-scrollbar>
    </div>
    <div class="page-div-placeholder"></div>
    <div class="page-div" style="background:#fff;">
      <el-pagination layout="prev, pager, next,jumper,sizes" :current-page="pageObj.page" :page-size="pageObj.pageSize"
        :total="pageObj.total"  @current-change="currentPageChange" @size-change="sizeChange"
                :page-sizes='pageObj.pageSizes' >
      </el-pagination>
    </div>
    <el-dialog title="关联费用模板" :show-close="false" :visible.sync=" dialogRelationVisible" width="60%">
      <el-row style="display:flex;justify-content:center;text-align:center;margin-bottom:20px;">
        <el-col :span="6">
          <el-select @change="buildingChange" placeholder="所属楼宇">
            <el-option v-for="item in buildingData" :key="item.pkBuildingId" :label="item.buildingName"
              :value="item.pkBuildingId">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-select placeholder="所属区域">
          </el-select>
        </el-col>
      </el-row>
      <el-transfer :titles="['未关联房间', '已关联房间']" filterable filter-placeholder="请输入城市拼音" v-model="value" :data="data">
      </el-transfer>
      <el-row style="text-align:center;margin-top:20px;">
        <el-button type="primary">确定</el-button>
        <el-button @click="dialogRelationVisible=false">取消</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
  import { listMixin } from "@/mixin"
  import { getRoomById, updateRoom } from "@/api/house/room/room"
  import { getBuildingName } from "@/api/house/building/building"
  import {
    getAllCostTemplate,
    closeCoefficient,
    conditionalQueryCoefficient
  } from "@/api/operations/coefficient/coefficient";
  import { Loading } from 'element-ui'

  export default {
    mixins: [listMixin],
    data() {
      return {
        canSubmit: false,
        RoomSelect: false,//是否是 ROOM跳转过来的
        closeCoefficientId: 0,
        dialogRelationVisible: false,
        value: [1, 4],
        formQuery: {
          state: null
        },
        buildingData: [],
        tableData: [],
      };
    },
    methods: {
      selMethod(row, i) {
        return row.costFactorStatus == '0';
      },
      loadData() {
        if (this.where) {
          return conditionalQueryCoefficient(this.where).then(res => {
            let { data, total } = res;
            this.tableData = data;
            this.pageObj.total = total;
          });
        } else {
          return getAllCostTemplate(this.pageObj).then(res => {
            let { data, total } = res;
            this.tableData = data;
            this.pageObj.total = total;
          });
        }
      },
      buildingChange() {

      },
      stopCoefficient(id) {
        this.$promptBox.show({ title: "停止系数", message: "确认是否停止使用系数" }).then(() => {
          closeCoefficient(id).then(res => {
            if (res.code === 10000) {
              this.$message.success(res.msg);
              this.loadDataProxy();
            }
          });
        });
      },
      replaceTemplate() {
        let tableData = this.$refs.multipleTable.selection;
        if (tableData.length === 0) {
          this.$message.warning("请选择要绑定的系数模板");
        } else if (tableData.length > 1) {
          this.$message.warning("只能绑定一个系数模板");
        } else {
          //有 time 表示有值缓存 意为从表单跳转过来
          if (this.$route.query.time) {
            this.$router.push(`/room/edit?CoefficientName=${tableData[0].coefficientName}&CoefficientTemplateId=${tableData[0].pkCoefficientTemplateId}&time=${this.$route.query.time}`);
          } else if (this.$route.query.roomId) {
            this.$promptBox.show({ title: "提示", message: "下月缴费将按最新系数模板计算，是否确认更换" })
              .catch(() => {
                this.cancelTemplate();
              });
            let roomId = this.$route.query.roomId;
            this.canSubmit = true;
            let obj = {};
            obj.pkRoomId = roomId;
            obj.fkCoefficientTemplateId = tableData[0].pkCoefficientTemplateId;
            updateRoom(obj).then(res => {
              if (res.code === 10000) {
                this.$message.success(res.msg);
                this.$router.push(`/coefficient/edit/0/${tableData[0].pkCoefficientTemplateId}?roomId=${roomId}`);
              }
            }).finally(_ => {
              this.canSubmit = false;
            });
          }
        }
      },
      cancelTemplate() {
        if (this.$route.query.time) {
          this.$router.push(`/room/edit?time=${this.$route.query.time}`);
        } else if (this.$route.query.roomId) {
          window.history.go(-1);
        }
      },
      tableRowClassName(row, rowIndex) {
        row = row.row;
        if (row.costFactorStatus == "1") {
          return "warning-row";
        } else {
          return "";
        }
      },
    },
    mounted() {
      // time 表示从编辑页进入 || roomid 表示从系数详情页进入
      if (this.$route.query.time || this.$route.query.roomId) {
        this.RoomSelect = true;
      }
      this.loadDataProxy();
    },
  };
</script>
